.upp{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 100000;
    transition: opacity 0.75s, visibility 0.75s;
}
  
.loader {
    width: 100px;
    aspect-ratio: 1;
    background: 
      linear-gradient(45deg,#60B99A 50%,#0000 0),
      linear-gradient(45deg,#0000 50%,#60B99A 0),
      linear-gradient(-45deg,#f77825 50%,#0000 0),
      linear-gradient(-45deg,#0000 50%,#f77825 0),
      linear-gradient(#554236 0 0);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    animation: l18 1.5s infinite;
  }
  @keyframes l18{
    0%   {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
    25%  {background-position:0  100%,100%  0,50%  50% ,50% 50%,50% 50%}
    50%  {background-position:0  100%,100%  0,100% 100%,0   0  ,50% 50%}
    75%  {background-position:50% 50%,50% 50%,100% 100%,0   0  ,50% 50%}
    100% {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
  }

  /* .loader--hidden{
    opacity: 0;
    visibility: hidden;
  } */

  .upp--hidden{
    opacity: 0;
    visibility: hidden;
  }